import { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View,Input } from '@tarojs/components'
import { connect } from 'react-redux'
import { carInfo } from '@/store/car/action'
import './index.scss'
import { updateMileage } from '@/api/car'

type State = {
  currentMileage: number | string
	carLicense:string
}
@connect<any>(({ car }) => ({ car }), _dispatch => ({
	dispatchFetchList() {
		return _dispatch(carInfo())
	}
}))
export default class CarList extends Component<any, State> {
  $instance = getCurrentInstance();
  constructor (props) {
    super(props)
    this.state = {
      currentMileage:'',
			carLicense:''
    }
  }

  componentDidMount() {
		let { carLicense='' ,currentMileage='' } =  this.$instance.router.params
		this.setState({
			carLicense,
			currentMileage
		})
  }

  UNSAFE_componentWillReceiveProps(nextProps) {

  }

	async handleUpdate() {
		console.log('this',this)
		let { carLicense,currentMileage } = this.state
		let params={
			carLicense,
			currentMileage
		}
		console.log('currentMileage',currentMileage)
		try {
				let res = await updateMileage(params)
				if (!res.data.success) {
						Taro.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000,
						})
				}
				await this.props.dispatchFetchList()
				Taro.navigateBack({
						delta: 1,
				})

		} catch (error) {
			console.log('error',error)
		}
	}

	changeCurrentMileage=(e)=>{
		this.setState({
			currentMileage: e.detail.value
		})
		return e.detail.value
	}

	goback= ()=>{
		Taro.navigateBack()
	}

  render() {
    return (
      <View className='car-mileage'>
       <View className='mileage-box'>
					<View className='mileage-head'>
						<View className='mileage-cancel' onClick={this.goback}>取消</View>
						<View className='mileage-sure' onClick={()=>this.handleUpdate()}>确认</View>
						<View className='mileage-title'>更新里程</View>
					</View>
					<View className='mileage-form'>
						<View className='mileage-current'>当前里程数</View>
						<View className='mileage-right'>
							<Input
								className='mileage-input'
							 	type='number'
							 	name='userphone'
                value={this.state.currentMileage}
                maxlength={8}
                onInput={this.changeCurrentMileage}></Input>
							<View className='mileage-unit'> km</View>
						</View>
					</View>
					<View className='h48'></View>
			 </View>
      </View>
    )
  }
}
